<!DOCTYPE html>
<html manifest="demo_html.appcache">
<!--AppCache 的缓存文件，与浏览器的缓存文件分开存储的，因为 AppCache 在本地有 5MB（分 HOST）的空间限制-->

<head>
    <meta charset="UTF-8">
    <title>Zqq</title>

    <script>
        <!--Android需要调用的方法-->
        function callJS(){
            alert("Android调用了JS的callJs方法");
        }

        <!--Android直接调用JS方法并传入值-->
        function returnResult(result){
            alert("result is" + result);
            document.getElementById("p").innerHTML = result;
        }
    </script>


    <!--拦截JS对话框-->
    <!--说明：当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了JS代码后，
        就会触发回调onJsPrompt（）
        1. 如果是拦截警告框（即alert()），则触发回调onJsAlert（）；
        2. 如果是拦截确认框（即confirm()），则触发回调onJsConfirm（）；-->
    <script>
        function clickprompt(){
            <!--调用prompt（）-->
            var result=prompt("js://demo?demoarg1=111&arg2=222");//协议怎么携带数据？？？？
            alert("demo "+result);
        }
    </script>

</head>

<body>
    <!--//点击按钮则调用callAndroid函数-->
    <button type="button" id="button1" onclick="callAndroid()">方法一、点击调用Android方法</button>
    <button type="button" id="button2" onclick="callAndroid2()">方法二、点击调用Android方法</button>
    <br><br/>
    <button type="button" id="button3" onclick="callAndroid3()">测试Js调用Android并返回值（即Android再调用Js）</button>

    <!-- 点击按钮则调用clickprompt()  -->
    <br><br/>
    <button onclick="clickprompt()">调用Android代码，测试拦截prompt()</button>

    <br><br/>
    <p id="p"></p>

    <script>
        <!--方法一、通过映射-->
        function callAndroid(){
            test.hello("js调用Android的Hello(即传给Android的数据)");    //此处test要与addJavascriptInterface（）方法里的name参数相同
        }

        <!--方法二、通过协议shouldOverrideUrlLoading ()拦截 url-->
        function callAndroid2(){
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            document.location="js://webview?arg1=111&arg2=222";//协议怎么携带数据？？？？？
        }

        function callAndroid3(){
            test.result("我是js的result（即传给Android的数据）");
        }
    </script>


    <!--漏洞修复-->
    <script>
        function JsAddJavascriptInterface_(){
            // window.jsInterface 表示在window上声明了一个Js对象
            //   jsInterface = 注册的对象名
            // 它注册了两个方法，onButtonClick(arg0)和onImageClick(arg0, arg1, arg2)
            // 如果有返回值，就添加上return
            if(typeof(window.jsInterface)!='undefined'){
                console.log('window.jsInterface_js_interface_name is exist!!');
            } else {
                window.jsInterface = {
                    // 声明方法形式：方法名: function(参数)
                    onButtonClick:function(arg0) {
                        // prompt（）返回约定的字符串
                        // 该字符串可自己定义
                        // 包含特定的标识符MyApp和 JSON 字符串（方法名，参数，对象名等）
                        return prompt('MyApp:'+JSON.stringify({obj:'jsInterface',func:'onButtonClick',args:[arg0]}));
                    },

                    onImageClick:function(arg0,arg1,arg2) {
                        return prompt('MyApp:'+JSON.stringify({obj:'jsInterface',func:'onImageClick',args:[arg0,arg1,arg2]}));
                    },
                };
            }
        }

    </script>


</body>


</html>